<template>
	<view class="feature-entry u-m-l-20 u-m-r-20">
		<view v-for="item in entries" :key="item.text" class="entry" @click="onEntryClick(item)">
			<view :style="{ background: item.bg }" class="icon">
				<image :src="item.icon" class="icon-img"/>
			</view>
			<text class="entry-text">{{ item.text }}</text>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			entries: [
				{
					text: '视频课程',
					icon: this.$imgUrl + '/static/images/voursevideo.png',
					bg: 'linear-gradient(135deg,#b4cafe,#e3eefe)',
					key: 'video',
					url: '/pages/course/course'
				},
				{
					text: '考试提醒',
					icon: this.$imgUrl + '/static/images/tixing.png',
					bg: 'linear-gradient(135deg,#b4d8fe,#e3f6fe)',
					key: 'remind',
					url: '/pages/examination/examination'
				},
				{
					text: '备考资料',
					icon: this.$imgUrl + '/static/images/beikao.png',
					bg: 'linear-gradient(135deg,#feb4b4,#fee3e3)',
					key: 'material',
					url: '/pages/information/information?type=material'
				},
				{
					text: '训练预约',
					icon: this.$imgUrl + '/static/images/yuyuexunlian.png',
					bg: 'linear-gradient(135deg,#b4fed8,#e3fee3)',
					key: 'train',
					url: '/pages/xunlian/xunlian'
				}
			]
		}
	},
	methods: {
		onEntryClick(item) {
			this.$emit('entry-click', item)
		}
	}
}
</script>
<style scoped>
.feature-entry {
	display: flex;
	justify-content: space-between;
	margin: 32rpx 0;
}

.entry {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12rpx;
}

.icon-img {
	width: 48rpx;
	height: 48rpx;
}

.entry-text {
	font-size: 24rpx;
	color: #333;
}
</style> 